<template>
<h1>猜数字练习</h1>
  <h3>已生成一个1-100之间的随机数:</h3>
  <input type="text" v-model="num">
  <button @click="check">点我验证</button>
  <br>
  <h3>小提示:{{result}}</h3>
</template>

<script setup>
import {ref} from "vue";
const result = ref(parseInt(Math.random() * 100+ 1));
const num = ref('');
const count = ref(0);
const check = ()=>{
  if(num.value==''){
    alert('请输入数字');
    return;
  }
  //对用户输入的数据进行校验
  if(!/^\d+$/.test(num.value)){
    alert('请输入数字!')
    return;
  }
  count.value++;
  if(num.value == result.value){
    alert('恭喜你，只用了'+count.value+'次就猜对了');
  }else if (num.value < result.value){
    alert('猜小了');
  }else{
    alert('猜大了');
  }
}

</script>

<style scoped>

</style>